<template>
  <div
    ref="checkboxRef"
    class="checkbox"
    :class="{
      'is-checked': props.checked,
      'is-disabled': props.disabled
    }"
    @click="handleClick"
  >
    <input type="checkbox" class="checkbox-original" />
    <span class="checkbox-inner">
      <i class="ri-check-line"></i>
    </span>
  </div>
</template>

<script setup lang="ts">
import { playSound } from '@renderer/utils/sound'
import { ref } from 'vue'

const emit = defineEmits(['update:checked'])
const props = defineProps({
  checked: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const checkboxRef = ref()
const handleClick = (e: Event) => {
  e.preventDefault()
  e.stopPropagation()
  emit('update:checked', !props.checked)
  if (!props.checked) {
    // 播放提示音效
    playSound()
  }
  if (checkboxRef.value) {
    if (checkboxRef.value.classList.contains('is-checked')) {
      return checkboxRef.value.classList.remove('is-checked')
    }
    checkboxRef.value.classList.add('is-checked')
  }
}
</script>

<style scoped lang="scss">
.checkbox {
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  position: relative;

  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }

  .checkbox-original {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    width: 0;
    height: 0;
    z-index: -1;
  }

  .checkbox-inner {
    width: 16px;
    height: 16px;
    position: relative;
    border-radius: 2px;
    border: 1.5px solid var(--xz-theme);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    i {
      opacity: 0;
      color: white;
    }
  }

  &.is-checked {
    .checkbox-inner {
      border-color: var(--xz-theme);
      background-color: var(--xz-theme);
    }

    i {
      opacity: 1;
    }
  }
}
</style>
